<template>
	<view class="page-container pall-l back-grey">
		<!-- 店铺信息卡片 -->
		<view class="back-white radius-l pall-l merchant-item mb-l" @click="goMerchant()">
			<image class="merchant-image radius-l" :src="merchant.icon" mode="aspectFill"></image>
			<view class="col-box sb" style="width: 100%;">
				<text class="limit2 bold">{{ merchant.name }}</text>
				<view class="row-box">
					<text class="s24 orange mr-base"><text class="s24 orange bold">5.0</text>分</text>
					<text class="s24 grey-dark mr-base">起送¥{{ moneyFormat(merchant.givePrice, 2) }}</text>
				</view>
				<text class="s24 grey-dark">营业时间：{{ merchant.beginTime }}-{{ merchant.endTime }}</text>
			</view>
			<u-icon name="arrow-right" color="#999" :size="24" label-pos="left"
				label="进店" label-size="24" label-color="#999" margin-right="10">
			</u-icon>
		</view>
		
		<!-- 流水概况 -->
		<view class="back-white radius-l prow-l pcol-base mb-base">
			<view class="row-box sb mb-base title-box">
				<text class="s30">流水概况</text>
			</view>
			<view class="order-flow">
				<view class="col-box center">
					<text class="s30 mb-4">0</text>
					<text class="s26 grey-light">今日订单</text>
				</view>
				<view class="col-box center">
					<text class="s30 mb-4">0</text>
					<text class="s26 grey-light">今日收益</text>
				</view>
				<view class="col-box center">
					<text class="s30 mb-4">16</text>
					<text class="s26 grey-light">累计订单</text>
				</view>
				<view class="col-box center">
					<text class="s30 mb-4">22</text>
					<text class="s26 grey-light">累计收益</text>
				</view>
			</view>
		</view>
		
		<!-- 商家订单 -->
		<view class="back-white radius-l prow-l pcol-base mb-base">
			<view class="row-box sb mb-base title-box">
				<text class="s30">商家订单</text>
				<u-icon name="arrow-right" color="#999" :size="24" label-pos="left"
					label="全部订单" label-size="24" label-color="#999" margin-right="10">
				</u-icon>
			</view>
			<view class="row-grid-box">
				<view class="col-box center">
					<text class="s30 mb-4">0</text>
					<text class="s26">订单未付</text>
				</view>
				<view class="col-box center">
					<text class="s30 mb-4">0</text>
					<text class="s26">订单待送</text>
				</view>
				<view class="col-box center">
					<text class="s30 mb-4">0</text>
					<text class="s26">订单完成</text>
				</view>
				<view class="col-box center">
					<text class="s30 mb-4 red">0</text>
					<text class="s26">退款处理</text>
				</view>
			</view>
		</view>
		
		
		<!-- 常用功能 -->
		<view class="back-white radius-l prow-l pcol-base mb-base">
			<view class="row-box sb mb-base title-box">
				<text class="s30">常用功能</text>
			</view>
			<view class="fun-grid">
				<view class="col-box center" @click="goInfo()">
					<view class="radius-circle image-box mb-10 row-box center" style="background: rgba(236, 173, 119, .1);">
						<image class="icon40" src="../static/店铺信息.png" mode="aspectFill"></image>
					</view>
					<text class="s26">店铺信息</text>
				</view>
				<view class="col-box center" @click="goMyApplySettle()">
					<view class="radius-circle image-box mb-10 row-box center" style="background: rgba(18, 150, 219, .1);">
						<image class="icon40" src="../static/我的认证.png" mode="aspectFill"></image>
					</view>
					<text class="s26">我的认证</text>
				</view>
				<view class="col-box center" @click="goCateManage()">
					<view class="radius-circle image-box mb-10 row-box center" style="background: rgba(115, 82, 191, .1);">
						<image class="icon40" src="../static/分类管理.png" mode="aspectFill"></image>
					</view>
					<text class="s26">分类管理</text>
				</view>
				<view class="col-box center" @click="goGoodsManage()">
					<view class="radius-circle image-box mb-10 row-box center" style="background: rgba(27, 187, 175, .1);">
						<image class="icon40" src="../static/商品管理.png" mode="aspectFill"></image>
					</view>
					<text class="s26">商品管理</text>
				</view>
				<!-- <view class="col-box center">
					<view class="radius-circle image-box mb-10" style="background: rgba(126, 121, 249, .1);">
						<image class="icon40" src="" mode="aspectFill"></image>
						
					</view>
					<text class="s26">店铺信息</text>
				</view> -->
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				merchant: {}, // 店铺信息
				// name: '', // 店铺名称
				// icon: '', // 店铺头像-门头
				// beginTime: '', // 营业时间-起始
				// endTime: '', // 营业时间-结束
				// givePrice: '', // 起送价格
				// userId: '', // 商家用户id
			};
		},
		onShow() {
			// 获取店铺详情
			this.getMerchantInfo()
		},
		methods: {
			// 前往商家详情
			goMerchant() {
				uni.navigateTo({
					url: `/pages/subPackage/merchant/detail/detail?userId=${this.merchant.userId}`
				})
			},
			
			// 跳转店铺信息
			goInfo() {
				uni.navigateTo({
					url: `/pages/subPackage/merchant/info/info?merchant=${JSON.stringify(this.merchant)}`
				})
			},
			
			// 跳转开通商家认证
			goMyApplySettle() {
				uni.navigateTo({
					url: `/pages/subPackage/user/my_apply_settle_certificate/my_apply_settle_certificate`
				})
			},
			
			// 跳转分类管理
			goCateManage() {
				uni.navigateTo({
					url: '/pages/subPackage/merchant/cate_manage/cate_manage'
				})
			},
			// 跳转商品管理
			goGoodsManage() {
				uni.navigateTo({
					url: '/pages/subPackage/merchant/goods_manage/goods_manage'
				})
			},
			
			// 获取店铺详情
			getMerchantInfo() {
				this.$api.GetMerchantInfo().then(res => {
					console.log('GetMerchantInfo-success', res)
					if (res.data.code === 200) {
						this.merchant = res.data.data
					}
				}).catch(err => {
					console.log('GetMerchantInfo-fail', err)
				})
			}
		},
	}
</script>

<style lang="scss">
	// 商家头部信息
	.merchant-item {
		display: grid;
		grid-template-columns: 160rpx 1fr 100rpx;
		column-gap: $uni-spacing-row-base;
		
		.merchant-image {
			display: block;
			width: 160rpx;
			height: 160rpx;
		}
		
	}
	
	// 流水概况
	.order-flow {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(2, 1fr);
		row-gap: 24rpx;
		
	}
	
	// 功能区
	.fun-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		row-gap: 24rpx;
		.image-box {
			width: 72rpx;
			height: 72rpx;
			.icon40 {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}
</style>
